<template>
	<view class="content">
		<!-- 底部阴影 -->
		<view class="bottom-shadow"></view>
		<custom-waterfalls-flow ref="waterfallsFlowRef" :value="pathAttractionList" image-key="images" :column="2"
			:hasPadding="false" :columnSpace="1.5" @imageClick="goscenicdetail">
			<view class="pathList-item" v-for="(item, index) in pathAttractionList" :key="index" slot="slot{{index}}">
				<view @click="goscenicdetail(item)">
					{{ item.name }}
				</view>
			</view>
		</custom-waterfalls-flow>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pathAttractionList: [],
				page: {
					pageNum: 1,
					pageSize: 10
				},
				total: 0
			};
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中...'
			})
			this.getAttractionList()
			setTimeout(() => {
				uni.hideLoading()
			}, 1000)
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 刷新数据的逻辑
			this.page.pageNum = 1
			this.page.pageSize = 10
			this.getAttractionList()
			// 模拟异步操作
			setTimeout(() => {
				// 刷新完成后，结束下拉刷新
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 上拉加载
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			handleImages(data) {
				return data.map(item => Object.assign(item, {
					images: item.images ? this.$u.fileBaseUrl + item.images.split(',')[0] :
						'/static/images/index/zwtp.png',
					showMore: false
				}));
			},
			// 获取景点列表
			async getAttractionList() {
				let res = await this.$u.api.getAttractionList(this.page)
				if (res.code == 200) {
					if (this.page.pageNum == 1) {
						this.pathAttractionList = this.handleImages(res.rows)
					} else {
						// 如果不是第一页，追加数据
						this.pathAttractionList = [
							...this.pathAttractionList,
							...this.handleImages(res.rows)
						];
						this.$refs.waterfallsFlowRef.refresh();
					}
					this.total = res.total;
				}
			},
			//跳转到景点详情页面
			goscenicdetail({id}) {
				console.log(123)
				uni.navigateTo({
					url: `/packagesIndex/pages/scenicdetail/scenicdetail?id=${id}`
				})
			},
			// 上拉加载
			loadMore() {
				if (this.pathAttractionList.length >= this.total) {
					uni.showToast({
						title: '没有更多景点了',
						icon: "none"
					});
					return;
				}

				this.page.pageNum += 1;
				uni.showLoading({
					title: '加载中...'
				});

				this.getAttractionList().then(() => {
					uni.hideLoading();
				}).catch(error => {
					console.error('加载更多数据时出错:', error);
					uni.hideLoading();
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
				});
			},
			handleMore(index) {
				this.pathAttractionList.map((item, listIndex) => {
					if (index !== listIndex) {
						return Object.assign(item, {
							showMore: false
						})
					}
				})
				this.$set(this.pathAttractionList, index, {
					...this.pathAttractionList[index],
					showMore: !this.pathAttractionList[index].showMore
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fff;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		min-height: 95vh;
		background-color: #f6f6f6;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));

		.bottom-shadow {
			position: fixed;
			z-index: -1;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 200rpx;
			background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
		}

		.title {
			padding: 20rpx;
			box-sizing: border-box;
		}



		.pathList-item {
			margin-bottom: 10rpx;
			position: relative;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);

			image {
				width: 100%;
				// height: auto;
				// margin: 20rpx 0;
				display: block;
				border-radius: 20rpx;
			}

			&>view {
				width: 92%;
				position: absolute;
				left: 4%;
				bottom: 40rpx;
				background-color: #fff;
				border-radius: 40rpx;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;

			}
		}

		.pace {
			width: 95%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: f6f6f6;
			padding: 20rpx 20rpx 50rpx 20rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 0rpx;

			button {
				flex: 1;

				&:nth-child(1) {
					color: #000000;
					background-color: #fff;
					text-align: center;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					margin-right: 20rpx;
				}

				&:nth-child(2) {
					color: #ffffff;
					background-color: #096EF4;
					text-align: center;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					// margin-right: 20rpx;
				}
			}
		}

		.more-name {
			margin: 20rpx 0;
		}

		.line {
			width: 100%;
			height: 1rpx;
			background: #f9f9f9;
		}

		.time {
			display: flex;
			align-items: center;
		}
	}
</style>